<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Photon, search-as-you-type with OpenStreetMap</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <link rel="stylesheet" href="static/leaflet.photon/leaflet.photon.css">
    <link rel="stylesheet" href="static/css/app.css">
    <link rel="icon" href="static/img/favicon_photon_logo.ico">
</head>
<body>

<header>
    <span id="photon">photon</span>
    <img src="static/img/photon_logo.png" id="logo"/>

    <div id="slogan">search as you type with OpenStreetMap</div>
    <!--<div class="col third">-->
    <!--<a href="mailto:photon@komoot.de" class="button get-in-touch">Get in touch</a>-->
    <!--</div>-->
</header>

<div class="wrapper map-wrapper">
    <div class="col two-third twide">
        <div class="map" id="map"></div>
    </div>
    <div class="col third content twide" style="padding-top:15px; padding-bottom: 15px">
        <ul class="features">
            <li>Typeahead suggestion</li>
            <li>Fast</li>
            <li>Scalable</li>
            <li>Multilingual</li>
            <li>Typo tolerance</li>
            <li>Reverse geocoding</li>
            <li>Minutely up to date OSM data</li>
        </ul>
    </div>
</div>
<div class="highlights wrapper" id="highlights">
    <div class="row">
        <div class="col third">
            <a href="http://osm.org">
                <img src="static/img/osm.svg"/>

                <p>
                    Made with OpenStreetMap
                    <br><span class="url">osm.org</span>
                </p>
            </a>
        </div>
        <div class="col third">
            <a href="https://github.com/komoot/photon">
                <img src="static/img/opensource.svg"/>

                <p>
                    Open Source<br>
                    <span class="url">github.com/komoot/photon</span>
                </p>

            </a>
        </div>
        <div class="col third">
            <a href="http://www.elasticsearch.org">
                <img src="static/img/es.svg"/>

                <p>
                    Powered by ElasticSearch
                    <br><span class="url">elasticsearch.org</span>
                </p>
            </a>
        </div>
    </div>
</div>
<div class="wrapper api" id="api">
    <div class="row">
        <div class="col third content mwide">
            <h2>A simple API</h2>
        </div>
        <div class="col two-third content mwide">
            <ul>
                <li>
                    <h4>Search</h4>
                    <pre>photon.komoot.io/api/?<strong>q=berlin</strong></pre>
                </li>
                <li>
                    <h4>Search, with priority to a geo position</h4>
                    <pre>photon.komoot.io/api/?q=berlin&amp;<strong>lat=52.3879&amp;lon=13.0582</strong></pre>
                </li>
                <li>
                    <h4>Limit number of results</h4>
                    <pre>photon.komoot.io/api/?q=berlin&amp;<strong>limit=1</strong></pre>
                </li>
                <li>
                    <h4>Force preferred language</h4>
                    <pre>photon.komoot.io/api/?q=berlin&amp;<strong>lang=de</strong></pre>
                </li>
                <li>
                    <h4>Reverse geocoding</h4>
                    <pre>photon.komoot.io/reverse?lon=10&lat=52</pre>
                </li>
                <li>
                    <h4>All good GeoJSON</h4>
                    <pre>
  {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "coordinates": [
            13.438596,
            52.519854
          ],
          "type": "Point"
        },
        "properties": {
          "city": "Berlin",
          "country": "Germany",
          "name": "Berlin"
        }
      },{
      "type": "Feature",
        "geometry": {
          "coordinates": [
            61.195088,
            54.005826
          ],
          "type": "Point"
        },
        "properties": {
          "country": "Russia",
          "name": "Berlin",
          "postcode": "457130"
        }
      }
    ]
  }
  </pre>
                </li>

                <li>
                    <h4>Note:</h4>
                    <p style="color: #444">
                        Until October 2020 the API was available under photon.komoot.<span
                            style="color: #EC6F33; font-weight: bold">de</span>.
                        Requests still work as they redirected to photon.komoot.<span
                            style="color: #EC6F33; font-weight: bold">io</span> but please update your apps accordingly.
                    </p>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="wrapper tou">

    <div class="row content">
        <h2>Terms of Use</h2>

        <p>You can use the API for your project, but please be fair - extensive usage will be throttled. We do not
            guarantee for the availability and usage might be subject of change in the future.</p>

        <p>Have fun with photon and make OSM grow!</p>
    </div>
</div>
<footer>
    An OpenStreetMap project run by <a href="http://www.komoot.de">komoot</a>
</footer>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="static/leaflet.photon/leaflet.photon.js"></script>
<script src="config.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
